<template>
    <div id='tab-control'>
        <div class="tab-control">
            <div class="tab-control-content">
                <div class="tab-control-item" v-for='(item,index) in tabControlItem' :key='index'
                :class="{'tab-control-item-big': index == 1,
                'tab-control-item-large': index == 3 || index == 5,
                'active-two': index == tabControlCurrent || index == tabControlActive
                  }"
                  @mouseover='tabControlActive = index'
                  @mouseout='tabControlActive = tabControlCurrent'
                >{{item}}
            </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'TabControl',

        data() {
            return {
                tabControlItem:['推荐','排行榜','歌单','主播电台','歌手','新碟上架'],
                tabControlCurrent:Number,//当前页面默认active
                tabControlActive:Number,//根据事件确认的active
            }
        },
        created(){
            if(this.$route.path == '/'){
                this.tabControlCurrent = 0
                this.tabControlActive = this.tabControlCurrent
            }
        }
    }
</script>

<style scoped>
    #tab-control {
        height: 36px;
        width: 100%;
        background: rgb(194,12,12);
        color: white;
        font-size: 12px;
    }
    .tab-control{
        width: 1260px;
        height: 100%;
        margin: auto;
    }
    .tab-control-content{
        width: 610px;
        height: 28px;
        margin-left: 230px;
        padding-top: 8px;
    }
    .tab-control-item{
        height: 20px;
        width: 50px;
        background:rgb(194,12,12);
        text-align: center;
        line-height: 22px;
        cursor: pointer;
        border-radius: 30px;
        margin-left: 40px;
        float: left;
    }
    .tab-control-item:first-child{
        margin-left: 23px !important
    }

    .tab-control-item-big{
        width: 62px !important;
    }

    .tab-control-item-large{
        width: 74px !important;
    }


    .active-two{
        background: rgb(155,9,9)
    }
</style>